<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
        body {
          margin: 0 auto;
          padding: 0px;
          font-size: 12px;
          background: url(images/bg.gif) repeat center 36px;
          text-align: center;
          background-color: #c30230;
        }
  
        #content {
          margin: 0 auto;
          width: 960px;
          background: url(images/content_bg.jpg) no-repeat left top;
          height: 627px;
        }
  
        #content .tip1,
        #content .tip2,
        #content .tip3,
        #content .tip4,
        #content .tip5,
        #content .tip6,
        #content .tip7,
        #content .tip8 {
          position: absolute;
          width: 227px;
          left: 200px;
          top: 100px;
        }
  
        #content .tip1 .tip_h {
          background: url(images/tip1_h.gif) no-repeat left top;
        }
  
        #content .tip1 .tip_h,
        #content .tip2 .tip_h,
        #content .tip3 .tip_h,
        #content .tip4 .tip_h,
        #content .tip5 .tip_h,
        #content .tip6 .tip_h,
        #content .tip7 .tip_h,
        #content .tip8 .tip_h {
          width: 227px;
          padding-top: 45px;
          height: 23px;
          text-align: left;
          cursor: move;
        }
  
        #content .tip1 .tip_c {
          background: url(images/tip1_c.gif) repeat-y;
        }
  
        #content .tip1 .tip_c,
        #content .tip2 .tip_c,
        #content .tip3 .tip_c,
        #content .tip4 .tip_c,
        #content .tip5 .tip_c,
        #content .tip6 .tip_c,
        #content .tip7 .tip_c,
        #content .tip8 .tip_c {
          width: 200px;
          padding-left: 12px;
          padding-right: 15px;
          min-height: 40px;
          text-align: left;
          line-height: 20px;
          max-height: 160px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
  
        #content .tip1 .tip_f {
          background: url(images/tip1_f.gif) no-repeat left top;
        }
  
        #content .tip1 .tip_f,
        #content .tip2 .tip_f,
        #content .tip3 .tip_f,
        #content .tip4 .tip_f,
        #content .tip5 .tip_f,
        #content .tip6 .tip_f,
        #content .tip7 .tip_f,
        #content .tip8 .tip_f {
          width: 227px;
          height: 53px;
          padding-top: 20px;
        }
  
        #content .close,
        #content .close2 {
          float: left;
          font-size: 12px;
          cursor: pointer;
          color: #000000;
        }
  
        .clr {
          clear: both;
          overflow: auto;
          display: block;
          height: 0px;
        }
  
        #content .icon {
          float: left;
          width: 35px;
          padding-left: 15px;
          height: 35px;
          text-align: center;
        }
  
        #content .name {
          float: right;
          padding-right: 15px;
          text-align: right;
          font-size: 14px;
          line-height: 35px;
          color: #c0f;
        }
  
        #content .num {
          float: left;
          padding-left: 7px;
          width: 195px;
        }
  
        #count {
          font-size: 20px;
          font-weight: 600;
          line-height: 28px;
          color: #222;
        }
  
        #comment {
          padding: 20px;
          box-sizing: border-box;
          height: 180px;
          margin-top: 20px;
          border-radius: 20px;
          position: relative;
          overflow: hidden;
          border-radius: 8px;
          padding: 16px;
          background: #f8f8f8;
          
        }
  
        #comment textarea {
          display: block;
          border: 0;
          padding: 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          max-height: 72px;
          width: 100%;
          height: 150px;
          font-size: 16px;
          line-height: 24px;
          color: #222;
          outline: none;
          resize: none;
          background: #f8f8f8;
          -webkit-transition: height 0.3s ease-in-out;
          -moz-transition: height 0.3s ease-in-out;
          transition: height 0.3s ease-in-out;
        }
  
        #comment button {
          border: none;
          border-radius: 4px;
          padding: 6px 18px;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: #fff;
          background: hotpink;
          cursor: pointer;
          outline: none;
        }
  
        #comment button:hover {
          background: deeppink;
        }
  
        #comment-box {
          width: 960px;
          margin: 0 auto;
          background: #fff;
        }
  
        .action {
          text-align: right;
        }
  
        #count {
          text-align: left;
          margin-bottom: 10px;
        }
  
        #canvas {
          display: block;
          position: fixed;
          margin: 0px;
          padding: 0px;
          border: 0px;
          outline: 0px;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
      </style>
  </head>

  <body>
    <div id="content">
      <div class="tip1" id="cc">
        <div class="tip_h" title="双击关闭纸条">
          <div class="num">第[49]条 2022-02-17 22:51:52</div>
          <div class="close" title="关闭纸条">×</div>
          <div class="clr"></div>
        </div>
        <div class="tip_c">希望马上赚2个亿</div>
        <div class="tip_f">
          <div class="icon">
            <img src="images/bpic_1.gif" alt="" title="" />
          </div>
          <div class="name">成真的人</div>
          <div class="clr"></div>
        </div>
      </div>
    </div>
    <div id="comment-box">
      <div id="comment">
        <div id="count">
          <b>评论:0</b>
        </div>
        <div id="ipt">
          <textarea
            placeholder="说点什么吧..."
            resize="none"
            name=""
            id="test"
            cols="30"
            rows="10"
          ></textarea>
          <div class="action">
            <button id="submit">发送评论</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
